<!DOCTYPE html>
<html>
<head>
<title>html5响应式九宫格</title>

<meta charset="utf-8" />
<style type="text/css">
    html, body { color:#222; font-family:Microsoft YaHei, Helvitica, Verdana, Tohoma, Arial, san-serif; margin:0; padding: 0; text-decoration: none; }
    img { border:0; }
    ul { list-style: none outside none; margin:0; padding: 0; }
    body {
        background-color:#eee; 
        margin-top: 5%;
    }
    body .mainmenu:after { clear: both; content: " "; display: block; }

    body .mainmenu li{ 
        float:left;
        margin-left: 2.5%;
        margin-top:2.5%;
        width: 30%;
        border-radius:3px; 
        overflow:hidden;
    }

    body .mainmenu li a{ display:block;  color:#FFF;   text-align:center }
    body .mainmenu li a b{ 
        display:block;
    }
    body .mainmenu li a img{ 
    	margin-top: 5px;
        /*margin: 15px auto 15px;*/
        width: 100px;
        height: 100px;
    }

    body .mainmenu li a span{ display:block; height:30px; line-height:30px;background-color:#FFF; color: #999; font-size:14px; }

    body .mainmenu li:nth-child(8n+1) {background-color:#36A1DB}
    body .mainmenu li:nth-child(8n+2) {background-color:#678ce1}
    body .mainmenu li:nth-child(8n+3) {background-color:#8c67df}
    body .mainmenu li:nth-child(8n+4) {background-color:#84d018}
    body .mainmenu li:nth-child(8n+5) {background-color:#14c760}
    body .mainmenu li:nth-child(8n+6) {background-color:#f3b613}
    body .mainmenu li:nth-child(8n+7) {background-color:#ff8a4a}
    body .mainmenu li:nth-child(8n+8) {background-color:#fc5366}
</style>
    <script type="text/javascript">

    function gotoActivity(activity) {
    <!--H5端调用的方法-->
    homePage.toActivity(activity);
    }</script>
</head>

<body>
    <ul class="mainmenu">
        <li><a href="javascript:void(0)" onclick="gotoActivity('TestInterfaceActivity')"><b><img src="images/tb01.png" /></b><span>测试接口</span></a></li>
        <li><a href="javascript:void(0)" onclick="gotoActivity('ProductListActivity')"><b><img src="icon\food.png" /></b><span>商品列表</span></a></li>
        <li><a href="javascript:void(0)" onclick="gotoActivity('CreateCompleteFileActivity')"><b><img src="icon\file.png" /></b><span>创建完全档</span></a></li>
        <li><a href="javascript:void(0)" onclick="gotoActivity('OrderActivity')"><b><img src="icon\order.png" /></b><span>订单查询</span></a></li>
        <li><a href="javascript:void(0)" onclick="gotoActivity('PhotoUpAndDownloadActivity')"><b><img src="icon/photoUpload.png" /></b><span>图片上传</span></a></li>
        <li><a href="javascript:void(0)" onclick="gotoActivity('CreateArchivesTempActivity')"><b><img src="icon/baseFile.png" /></b><span>创建基本档</span></a></li>
        <li><a href="javascript:void(0)" onclick="gotoActivity('FirstActivity')"><b><img src="images/tb06.png" /></b><span>链接7</span></a></li>
        <li><a href="javascript:void(0)" onclick="gotoActivity('FirstActivity')"><b><img src="images/tb07.png" /></b><span>链接8</span></a></li>
        <li><a href="javascript:void(0)" onclick="gotoActivity('FirstActivity')"><b><img src="images/tb08.png" /></b><span>链接9</span></a></li>
    </ul>
</body>
</html>